<template>
	<div class="channel-edit">
		<van-cell :border="false">
			<div slot="title" class="title-text">我的频道</div>
			<van-button plain round size="mini" class="edit-btn" @click="isEdit = !isEdit">{{isEdit? '完成':'编辑'}}
			</van-button>
		</van-cell>

		<van-grid :gutter="10">
			<van-grid-item v-for="(channel, index) in channels" :key="index" class="grid-item"
				@click="onMyChannelClick(channel, index)">
				<van-icon slot="icon" name="clear" v-show="isEdit && !fixedChannels.includes(channel.id)"></van-icon>
				<span slot="text" class="text" :class="{active : index === active}">{{channel.name}}</span>
			</van-grid-item>
		</van-grid>

		<van-cell :border="false">
			<div slot="title" class="title-text">频道推荐</div>
		</van-cell>

		<van-grid :gutter="10" direction="horizontal" :column-num="3">
			<van-grid-item v-for="(channel, index) in recommendChannels" :key="index" :text="channel.name"
				class="grid-item" icon="plus" @click="onAddChannel(channel)" />
		</van-grid>
	</div>
</template>

<script>
	import {
		getAllChannels,
		addUserChannel,
		delUserChannel
	} from '@/api/channel.js'
	import {
		mapState
	} from 'vuex'
	import {
		setItem
	} from '@/utils/storage.js'

	export default {
		props: {
			channels: {
				type: Array,
				required: true
			},
			active: {
				type: Number,
				required: true
			}
		},
		data() {
			return {
				allChannels: [],
				isEdit: false,
				fixedChannels: [0],
			}
		},
		created() {
			this.loadAllChannels()
		},
		methods: {
			async loadAllChannels() {
				try {
					const {
						data: res
					} = await getAllChannels()

					this.allChannels = res.data.channels
				} catch (e) {
					this.$toast('数据获取失败')
				}
			},

			async onAddChannel(channel) {
				this.channels.push(channel)

				if (this.user) {
					try {
						await addUserChannel({
							id: channel.id,
							sql: this.channels.length
						})
					} catch (e) {
						this.$toast('添加失败，请稍后重试')
					}
				} else {
					setItem('TOUTIAO_CHANNELS', this.channels)
				}
			},

			onMyChannelClick(channel, index) {
				if (this.isEdit) {
					if (this.fixedChannels.includes(index)) {
						return
					}

					if (index <= this.active) {
						this.$emit('update-active', this.active - 1, true)
					}

					this.channels.splice(index, 1)

					this.deleteChannel(channel)
				} else {
					this.$emit('update-active', index, false)
				}
			},

			async deleteChannel(channel) {
				if (this.user) {
					try {
						await delUserChannel(channel.id)
					} catch (e) {
						this.$toast('删除失败，请稍后重试')
					}
				} else {
					setItem('TOUTIAO_CHANNELS', this.channels)
				}
			}, 
		},
		computed: {
			...mapState(['user']),
			recommendChannels() {
				const otherChannels = [];

				this.allChannels.forEach(channel => {
					const ret = this.channels.find(myChannel => {
						return myChannel.id === channel.id
					})

					if (!ret) {
						otherChannels.push(channel)
					}
				})
				return otherChannels
			},
		},

	}
</script>

<style lang="less" scoped>
	.channel-edit {
		padding: 0;
		margin-top: 60px;

		.title-text {
			font-size: 32px;
			color: #333;
		}

		.edit-btn {
			width: 104px;
			height: 48px;
			font-size: 26px;
			color: #f85959;
			border: 1px solid #f85959;
		}

		/deep/ .grid-item {
			width: 160px;
			height: 86px;

			.van-icon-clear {
				position: absolute;
				right: -10px;
				top: -10px;
				font-size: 30px;
				color: #cacaca;
				z-index: 3;
			}

			.van-grid-item__content {
				white-space: nowrap;
				background-color: #f4f5f6;
				display: flex;
				justify-content: space-around;

				.van-grid-item__text,
				.text {
					font-size: 28px;
					color: #222;
					margin-top: 0;
					flex: 1;
				}

				.van-grid-item__icon-wrapper {
					position: unset;
				}

				.active {
					color: red;
				}

				.van-icon-plus {
					font-size: 28px;
				}
			}
		}
	}
</style>
